{include file="public/header" /}
<blockquote class="layui-elem-quote">
    添加
</blockquote>
<form class="layui-form layui-form-pane kllxs-form" id="kllxs-tpl-from" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">角色等级</label>
        <div class="layui-input-block">
            <select name="pid" id="">
                <option value="0">顶级角色</option>
                {foreach $parent_data as $k=>$v}
                <option value="{$v.id}">{$v.level|raw}{$v.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" autocomplete="off" placeholder="请输入角色名称" class="layui-input" value="">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色权限</label>
        <div class="layui-input-block">
            <div id="tree"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn" lay-submit lay-filter="kllxs-submit">确认</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
{include file="public/footer" /}
<script>
    layui.use(["tree", "form", "popup", "xmSelect", "jquery"], function () {
        var form = layui.form
        var popup = layui.popup
        var xmSelect = layui.xmSelect
        var $ = layui.$

        xmSelect.render({
            el: '#tree',
            autoRow: true,
            height: 'auto',
            name: "auth",
            placeholder: "请选择角色权限",
            toolbar: {
                show: true,
            },
            tree: {
                show: true
            },
            prop: {
                name: "title",
                value: "key"
            },
            data: function () {
                var data = JSON.parse(`[{$appAttribute|raw}]`)
                return data[0]
            },
            model: {
                label: {
                    type: 'block', //自定义与下面的对应
                    block: {
                        template(data) {
                            return `${data.__node.parent.title}-${data.title}`;
                        }
                    },
                }
            }
        })

        form.on('submit(kllxs-submit)', function (data) {
            var field = data.field; // 获取表单全部字段值
            popup.formSubmit("", field)

            return false; // 阻止默认 form 跳转
        })

    })
</script>